<template>
  <div class="recommend">
    <div class="title">
      <span>{{ title }}</span>
      <p>{{ button }}<i class="iconfont icon-youhuaxiangyougengduo"></i></p>
    </div>
    <Recommend :arr="{ ...arr }" />
  </div>
</template>

<script>
import Recommend from "../components/recommend.component.vue";
import { getlink } from "@/api/getlink";
export default {
  data() {
    return {
      arr: [],
      title: "",
      button: "",
    };
  },
  mounted() {
    getlink("/xpf/home").then((ok) => {
      this.arr = ok.data.data.blocks[1].creatives;
      this.title = ok.data.data.blocks[1].uiElement.subTitle.title;
      this.button = ok.data.data.blocks[1].uiElement.button.text;
    });
  },
  components: {
    Recommend,
  },
};
</script>

<style lang="less" scoped>
.recommend {
  margin-top: 0.01rem;
  height: 4.04rem;
  padding: 0.32rem 0 0.34rem 0.3rem;
  background-color: #ffffff;
  border-bottom-left-radius: 0.16rem;
  border-bottom-right-radius: 0.16rem;
  margin-bottom: 0.19rem;

  .title {
    height: 0.44rem;
    padding-right: 0.3rem;
    margin-bottom: 0.33rem;
    span {
      font-size: 0.32rem;
      font-weight: 700;
    }
    p {
      padding: 0.11rem 0.17rem 0.09rem 0.19rem;
      float: right;
      font-size: 0.22rem;
      box-sizing: border-box;
      border: 0.01rem solid #ececec;
      border-radius: 0.24rem;
      line-height: 0.19rem;
      i {
        vertical-align: middle;
        &::before {
          display: inline-block;
          font-size: 0.18rem;
        }
      }
    }
  }
}
/*隐藏滚动条*/
::-webkit-scrollbar {
  display: none;
}
</style>